﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Electman - Electrician HTML Template | Home Page 02</title>
<script src="js/vue.js"></script>
<!-- Stylesheets -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Color File -->
<link href="css/color.css" rel="stylesheet">
<!-- Responsive File -->
<link href="css/responsive.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<!-- 引入样式 -->
<link href="css/detail.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<link href="css/public.css" rel="stylesheet">

<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<link rel="icon" href="images/favicon.png" type="image/x-icon">

<!-- Responsive Settings -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</head>

<body>
<div class="page-wrapper" id="app">
    <!-- Preloader -->
    <div class="preloader"><div class="icon"></div></div>

 <!-- Main Header -->
    <header class="main-header header-style-one inner-page-header">
        <!-- Header Top -->
        <div class="header-top header-top-one">
            <div class="header-main-box">
                <div class="auto-container">
                    <div class="inner-container">
                        <div class="upper-row clearfix header-custom">
                            <!--Logo-->
                            <div class="logo-box">
                                <div class="logo">
                                    <a href="index.html" title="Electman - Electrician HTML Template">
                                        <span class="logo_bolt"><img src="" alt="Electrician"></span>
                                        <img src="images/logo.png" alt="Electman - Electrician HTML Template" title="Electman - Electrician HTML Template">
                                    </a>
                                </div>
                                
                            </div>
                            <!--Search Btn-->
                            <div class="right-info clearfix">
                                <div class="link-box resolve">
                                    <a class="theme-btn btn-style-one" @click="searchToggler"><div class="btn-title"><span class="btn-txt">干掉你的麻烦</span><span class="btn-icon search"><span class="icon"></span> </span></div></a>
                                </div>
                                <a href="logreg.html" class="login"><p>登录</p></a>

                                <!--试验-->
                                <div id="cart_box" class="cart_box" @mouseover="searchCart">
                                    <a id="cart" class="cart_link" href="#" rel="nofollow">
                                     <span class="text">购物车</span>
                                        <img src="images/icons/shopping.png" width="24" height="24" class="cart_gif">
                                       
                                        <!-- 购物车没有物品时，隐藏此num -->
                                        <span class="num">{{cartresult.totalNum}}</span>
                                        <s class="icon_arrow_right"></s>
                                    </a>
                    
                                    <div class="cart_content" id="cart_content">
                                        <i class="cart-icons"></i>
                                        <!-- 购物车没有物品时，显示cart_content_null、隐藏cart_content_all -->
                                        <div class="cart_content_null" style="display: none;">购物车中还没有商品，<br>快去挑选心爱的商品吧！</div>
                                        <div class="cart_content_all" style="display: block;">
                                            <div class="cart_content_center">
                                                <!-- v-for="item in goodsList" -->
                                                <div class="cart_con_single" v-for="item in goodsList">
                                                    <div class="single_pic">
                                                        <a href="#" target="_blank" alt="">
                                                            <img src="images/goods_img01.jpg" />
                                                        </a>
                                                    </div>
                                                    <div class="single_info">
                                                        <a href="#" target="_blank" alt="" class="name">{{item.name}}</a>
                                                        <span class="price">￥{{item.price}}.00</span>
                                                        <span class="price_plus"> x </span>
                                                        <span class="price_num">{{item.num}}</span>
                                                    </div>
                                                </div>
                    
                                            </div>
                                            <div class="con_all">
                                                <div class="price_whole"><span>共<span class="num_all">{{cartresult.totalNum}}</span>件商品</span></div>
                                                <div><span class="price_gongji">共计<em>￥</em><span class="total_price">{{cartresult.totalPrice}}</span></span><a href="shoppingCart.html" class="cart_btn" rel="nofollow">去购物车结算</a></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Header Upper -->
        <div class="header-main-box">
            <div class="ad clearfix">
                <img src="./images/background/greeAd.png">
            </div>
            <div class="auto-container">
                <div class="inner-container">
                    <div class="lower-row">
                        <!--Nav Box-->
                        <div class="nav-box clearfix">
                            <div class="nav-outer clearfix">
                                <!--Mobile Navigation Toggler-->
                                <div class="mobile-nav-toggler"><span class="icon flaticon-menu-1"></span></div>

                                <!-- Main Menu -->
                                <nav class="main-menu navbar-expand-md navbar-light">
                                    <div class="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
                                        <ul class="navigation clearfix">
                                            <li class="current"><a href="index.html">首页</a>
                                            </li>
                                            <li class="dropdown"><a href="about.html">About Us</a>
                                            <ul>
                                                <li><a href="about.html">About Us</a></li>
												<li><a href="team.html">Our Team</a></li>
												<li><a href="pricing.html">Our Pricing</a></li>
												<li><a href="whyus.html">Why Choose Us</a></li>
												<li><a href="testimonials.html">Testimonials</a></li>
												<li><a href="faqs.html">FAQ's</a></li>
												
                                            </ul>
                                        </li>
                                            <li class="dropdown"><a href="services.html">Services</a>
                                                <ul>
                                                    <li><a href="services.html">All Services</a></li>
                                                    <li><a href="serdetails1.html">Electrical Repairs</a></li>
                                                    <li><a href="serdetails2.html">Lighting Upgrades</a></li>
                                                    <li><a href="serdetails3.html">Surge Protection</a></li>
                                                    <li><a href="serdetails4.html">Install a Ceiling Fan</a></li>
                                                    <li><a href="serdetails5.html">Digital Thermostat </a></li>
                                                    <li><a href="serdetails6.html">Baseboard Heating </a></li>
                                                </ul>
                                            </li>
                                            <li class="dropdown"><a href="projects.html">Projects</a>
											<ul>
                                                    <li><a href="projects.html">Projects Style 01</a></li>
													<li><a href="projects2.html">Projects Style 02</a></li>
													<li><a href="projectdetails.html">Projects Details</a></li>
                                                   
                                                </ul>
											
											</li>
											<li><a href="shop.html">Shop
											</a></li>
                                            <li class="dropdown"><a href="blog.html">News</a>
                                                <ul>
                                                    <li><a href="blog.html">Our News Blog</a></li>
                                                    <li><a href="blog-single.html"> Post Details</a></li>
                                                </ul>
                                            </li>
                                            <li><a href="contact.html">Contact
											</a></li>
                                        </ul>
                                    </div>
                                </nav>
                            </div>
                            <!--Search Btn-->
                            <div class="search-btn" v-show="flag">
                                <button type="button" class="theme-btn" @click="searchToggler"><span class="fa fa-search"></span></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End Header Upper-->

        <!-- Sticky Header  -->
        <div class="sticky-header">
            <div class="auto-container clearfix">
                <!--Logo-->
                <div class="logo pull-left">
                    <a href="index.html" title=""><img src="images/logo.png" alt="" title=""></a>
                </div>
                <!--Right Col-->
                <div class="pull-right">
                    <!-- Main Menu -->
                    <nav class="main-menu clearfix">
                        <!--Keep This Empty / Menu will come through Javascript-->
                    </nav><!-- Main Menu End-->
                </div>
            </div>
        </div><!-- End Sticky Menu -->

        <!-- Mobile Menu  -->
        <div class="mobile-menu">
            <div class="menu-backdrop"></div>
            <div class="close-btn"><span class="icon flaticon-cancel"></span></div>
            
            <nav class="menu-box">
                <div class="nav-logo"><a href="index.html"><img src="images/nav-logo.png" alt="" title=""></a></div>
                <div class="menu-outer"><!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header--></div>
				<!--Social Links-->
				<div class="social-links">
					<ul class="clearfix">
						<li><a href="#"><span class="fab fa-twitter"></span></a></li>
						<li><a href="#"><span class="fab fa-facebook-square"></span></a></li>
						<li><a href="#"><span class="fab fa-pinterest-p"></span></a></li>
						<li><a href="#"><span class="fab fa-instagram"></span></a></li>
						<li><a href="#"><span class="fab fa-youtube"></span></a></li>
					</ul>
                </div>
            </nav>
        </div><!-- End Mobile Menu -->
    </header>
    <!-- End Main Header -->

    <!--Search Popup-->
    <div id="search-popup" :class="['search-popup',{'popup-visible': isActive}]" @keydown.27="shutSearch">
        <div class="close-search theme-btn" @click="shutSearch"><span class="flaticon-cancel"></span></div>
        <div class="popup-inner">
            <div class="overlay-layer"></div>
            <div class="search-form">
                <form method="post" action="index.html">
                    <div class="form-group">
                        <fieldset>
                            <input type="search" class="form-control" name="search-input" value="" placeholder="Search Here" required >
                            <input type="submit" value="Search Now!" class="theme-btn">
                        </fieldset>
                    </div>
                </form>
                
                <br>
                <h3>Recent Search Keywords</h3>
                <ul class="recent-searches">
                    <li><a href="#">Finance</a></li>
                    <li><a href="#">Idea</a></li>
                    <li><a href="#">Service</a></li>
                    <li><a href="#">Growth</a></li>
                    <li><a href="#">Plan</a></li>
                </ul>
            
            </div>
            
        </div>
    </div>


  <!-- Page Banner Section -->
    <section class="page-banner">
        <!-- :style="{background:'url(' + item.goodimage + ')'" -->
        <div class="image-layer" style="background-image: url(images/background/guishi.jpg);"></div>

        <div class="auto-container">
            <h1>{{sku.name}}</h1>
			<div class="breadcrumb-box">
                <div class="auto-container">
                    <ul class="bread-crumb clearfix">
                        <li><a href="index.html">30分钟内预约</a></li>
                        <li class="active">准时上门服务</li>
                    </ul>
                </div>
            </div>

            
        </div>

    </section>
    <div class="price-data">
        <span>￥88.00</span>
        <h2>/台</h2>
        <div><button @click="addCart">加入购物车</button></div>
    </div>
    <div class="introduce">
        <p>{{sku.name}}</p>
    </div>
    <div class="service">
        <span>已服务4205次</span>
    </div>
    <!--Main Info Section-->
    <section class="main-info-section">
        <!--<div class="right-image2">
        	<div class="image">
            	<img src="images/main/bulb9.png" alt="">
            </div>
        </div>-->
		<div class="auto-container">
            <div class="projedetails"><img src="images/broad/airconditioner/kt_guiji.jpg" alt=""></div><br>
			<div class="sec-title-two">
                <div class="subtitle">pure & clean wind is the world to us</div>
                <h2>Industry-leading smart data capabilities<br>250+ GW of wind turbines installed</h2>
            </div>

            <div class="upper-content">
                <div class="text">Aenean volutpat, sem sit amet ullamcorper gravida, tortor arcu molestie risus bibendum urna enim nulla. Pellentesque porta arcu velit, faucibus kodales dolor rhoncus sed. Curabitur lacinia massa vitae efficitur porttitor. Sed scelerisque vestib ulum lectus, at egestas erat varius. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit minus id quod maxime placeat facere possimus omnis voluptas assumend.</div>
            </div>
            <div class="features-list">
                <ul class="clearfix">
                    <li class="wow fadeInLeft" data-wow-delay="0ms"  data-wow-duration="1000ms"><a href="#" class="inner">
                        <div class="icon">
                           <img src="images/icons/icon-1.png" alt="current">
                        </div>
                        <div class="txt">Winds Cause</div>
                    </a></li>
                    <li class="wow fadeInLeft" data-wow-delay="200ms"  data-wow-duration="1000ms"><a href="#" class="inner">
                        <div class="icon">
                           <img src="images/icons/icon-2.png" alt="current">
                        </div>
                        <div class="txt">Green Business</div>
                    </a></li>
                    <li class="wow fadeInLeft" data-wow-delay="400ms"  data-wow-duration="1000ms"><a href="#" class="inner">
                        <div class="icon">
                           <img src="images/icons/icon-3.png" alt="current">
                        </div>
                        <div class="txt">Sustainability</div>
                    </a></li>
                    <li class="wow fadeInLeft" data-wow-delay="600ms"  data-wow-duration="1000ms"><a href="#" class="inner">
                       <div class="icon">
                           <img src="images/icons/icon-4.png" alt="current">
                        </div>
                        <div class="txt">Manufacturing</div>
                    </a></li>
                    <li class="wow fadeInLeft" data-wow-delay="800ms"  data-wow-duration="1000ms"><a href="#" class="inner">
                        <div class="icon">
                           <img src="images/icons/icon-5.png" alt="current">
                        </div>
                        <div class="txt">Create Balance</div>
                    </a></li>
                </ul>
            </div>
        </div>

        <div class="lower-content">
            <div class="auto-container">
                <div class="row clearfix">
                    <div class="inner">
                        <div class="wow fadeInLeft liucheng" data-wow-delay="0ms" data-wow-duration="2000ms"><img src="images/broad/liucheng/liucheng1.jpg" alt=""></div>
                        <div class="wow fadeInLeft liucheng" data-wow-delay="0ms" data-wow-duration="2000ms"><img src="images/broad/liucheng/liucheng3.jpg" alt=""></div>
                        <div class="wow fadeInLeft liucheng" data-wow-delay="0ms" data-wow-duration="2000ms"><img src="images/broad/liucheng/liucheng2.jpg" alt=""></div>
                    </div>
                    
                    
                </div>
            </div>
			
        </div>
    </section>
 <!--History Section-->
    <section class="history-section">
        <div class="auto-container">
            <div class="carousel-box">

                <div class="history-carousel strnix-carousel owl-theme owl-carousel" data-options='{"loop": true, "margin": 30, "autoheight":true, "lazyload":true, "nav": true, "dots": true, "autoplay": true, "autoplayTimeout": 6000, "smartSpeed": 500, "responsive":{ "0" :{ "items": "1" }, "600" :{ "items" : "1" }, "768" :{ "items" : "2" }, "800":{ "items" : "2" }, "1024":{ "items" : "3" }, "1200":{ "items" : "4" }}}'>
                    <div class="slide">
                        <div class="history-block">
                            <div class="date">2012</div>
                            <div class="round-dot"></div>
                            <div class="title">Company founded</div>
                            <div class="text">Pellentesque porta arcu velit faucibs kodales dolor rhoncus sed. Curabitur lacinia masysa vitae sed.</div>
                        </div>
                    </div>
                    <div class="slide">
                        <div class="history-block">
                            <div class="date">2013</div>
                            <div class="round-dot"></div>
                            <div class="title">Features & add-ons</div>
                            <div class="text">Pellentesque porta arcu velit faucibs kodales dolor rhoncus sed. Curabitur lacinia masysa vitae sed.</div>
                        </div>
                    </div>
                    <div class="slide">
                        <div class="history-block">
                            <div class="date">2014</div>
                            <div class="round-dot"></div>
                            <div class="title">continue to inspire</div>
                            <div class="text">Pellentesque porta arcu velit faucibs kodales dolor rhoncus sed. Curabitur lacinia masysa vitae sed.</div>
                        </div>
                    </div>
                    <div class="slide">
                        <div class="history-block">
                            <div class="date">2015</div>
                            <div class="round-dot"></div>
                            <div class="title">got best tech award</div>
                            <div class="text">Pellentesque porta arcu velit faucibs kodales dolor rhoncus sed. Curabitur lacinia masysa vitae sed.</div>
                        </div>
                    </div>
                    <div class="slide">
                        <div class="history-block">
                            <div class="date">2016</div>
                            <div class="round-dot"></div>
                            <div class="title">Company founded</div>
                            <div class="text">Pellentesque porta arcu velit faucibs kodales dolor rhoncus sed. Curabitur lacinia masysa vitae sed.</div>
                        </div>
                    </div>
                    <div class="slide">
                        <div class="history-block">
                            <div class="date">2017</div>
                            <div class="round-dot"></div>
                            <div class="title">Features & add-ons</div>
                            <div class="text">Pellentesque porta arcu velit faucibs kodales dolor rhoncus sed. Curabitur lacinia masysa vitae sed.</div>
                        </div>
                    </div>
                    <div class="slide">
                        <div class="history-block">
                            <div class="date">2018</div>
                            <div class="round-dot"></div>
                            <div class="title">continue to inspire</div>
                            <div class="text">Pellentesque porta arcu velit faucibs kodales dolor rhoncus sed. Curabitur lacinia masysa vitae sed.</div>
                        </div>
                    </div>
                    <div class="slide">
                        <div class="history-block">
                            <div class="date">2019</div>
                            <div class="round-dot"></div>
                            <div class="title">got best tech award</div>
                            <div class="text">Pellentesque porta arcu velit faucibs kodales dolor rhoncus sed. Curabitur lacinia masysa vitae sed.</div>
                        </div>
                    </div>
                </div>
            </div>
<div class="left_image1">
        	<div class="image">
            	<img src="images/main/service-left-icon.png" alt="">
            </div>
        </div>
        </div>
    </section>
   
    <!--Services Section-->
    <section class="services-section-two">
            <div class="bottom-text">
                <div class="text">We’re Renewable Energy Generation Compant - Need Emergency Help? <br>Call or email us 24/7 support team at <span class="phone"><a href="tel:+1-(222)-303-4500">+1 (222) 303 4500</a></span></div>
            </div>
        </div>
    </section>
    <!-- Main Footer / Style Two-->
  <!-- Main Footer / Style Five-->
    <footer class="main-footer footer-style-five">

        <!--Widgets Section-->
        <div class="widgets-section">
            <div class="auto-container">
                <div class="row clearfix">
                    
                    <!--Column-->
                    <div class="footer-column col-lg-4 col-md-5 col-sm-12">
                        <div class="footer-widget about-widget">
                            <div class="footer-logo-box">
                                <a href="index.html" title="Electman - Electrician HTML Template"><img src="images/logo2.png" alt="" title=""></a>
                            </div>
                            <div class="about-text">Integer lobortis sem consequat imperdiet In nulla viverra ut lorem ut, dapibus conse etur diam. Nun bibendum diet condiment sed ipsum duis lacinia.</div>
                            <div class="footer-social">
                                <ul class="footer-social-two clearfix">
                                    <li><a href="#"><span class="fab fa-twitter"></span></a></li>
                                    <li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
                                    <li><a href="#"><span class="fab fa-instagram"></span></a></li>
                                    <li><a href="#"><span class="fab fa-linkedin-in"></span></a></li>
                                    <li><a href="#"><span class="fab fa-pinterest-p"></span></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!--Column-->
                    <div class="big-column col-lg-5 col-md-7 col-sm-12">
                        <div class="row clearfix">
                            <!--Column-->
                            <div class="footer-column col-lg-6 col-md-6 col-sm-12">
                                <div class="footer-widget links-widget">
                                    <div class="widget-title">
                                        <h3>Quick Links</h3>
                                    </div>
                                    <div class="widget-content">
                                        <ul>
                                            <li><a href="#">About Electman</a></li>
                                            <li><a href="#">News Blog</a></li>
                                            <li><a href="#">Careers</a></li>
                                            <li><a href="#">Case Studies</a></li>
                                            <li><a href="#">Meet Our Team</a></li>
                                            <li><a href="#">Testimonials</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            
                            <!--Column-->
                            <div class="footer-column col-lg-6 col-md-6 col-sm-12">
                                <div class="footer-widget links-widget">
                                    <div class="widget-title">
                                        <h3>Our Services</h3>
                                    </div>
                                    <div class="widget-content">
                                        <ul>
                                            <li><a href="#">Installation & Monitoring</a></li>
                                            <li><a href="#">After Sales Service</a></li>
                                            <li><a href="#">Free Replacemrnt</a></li>
                                            <li><a href="#">Warrenty Claims</a></li>
                                            <li><a href="#">Energy Equipments</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--Column-->
                    <div class="footer-column col-lg-3 col-md-12 col-sm-12">
                        <div class="footer-widget gallery-widget">
                            <div class="widget-title">
                                <h3>Contact Us</h3>
                            </div>
                            <div class="info">
                                <!--Info Block-->
                                <div class="info-block">
                                    <div class="icon-box">
                                        <span class="icon">
                                            <img src="images/icons/icon-message-1.png" alt="">
                                        </span>
                                    </div>
                                    <strong>Visit The Office</strong>
                                    <div class="info-text">102 Taily End Rd, NY</div>
                                </div>
                                <!--Info Block-->
                                <div class="info-block">
                                    <div class="icon-box">
                                        <span class="icon">
                                            <img src="images/icons/icon-call-1.png" alt="">
                                        </span>
                                    </div>
                                    <strong>Phone Inquiry</strong>
                                    <div class="info-text">
                                        <a href="tel:(222)-303-4500">(222) 303 4500</a>
                                    </div>
                                </div>
                                <!--Info Block-->
                                <div class="info-block">
                                    <div class="icon-box">
                                        <span class="icon">
                                            <img src="images/icons/icon-mail-1.png" alt="">
                                        </span>
                                    </div>
                                    <strong>Send Email</strong>
                                    <div class="info-text">
                                        <a href="mailto:info@domain.com">info@domain.com</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
					
					
                    
                </div>
				<div class="nav-box clearfix">
                	<div class="inner clearfix">
                    	<ul class="footer-nav clearfix">
                        	<li><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Gallery</a></li>
                            <li><a href="#">Service</a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                        
						<div class="footer_bttn">
                            <a href="contact.html" class="theme-btn btn-style-seven"><div class="btn-title"><span class="btn-txt">Contact Us</span><span class="btn-icon"><span class="icon flaticon-arrows-11"></span> </span></div></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Footer Bottom -->
        <div class="footer-bottom">
            <div class="auto-container">

                <div class="inner clearfix">
                    <!--Scroll to top-->
                    <div class="scroll-top-footer scroll-to-target" data-target="html"><span class="flaticon-arrows"></span></div>
                    <!--Copyright-->
                    <div class="copyright">Copyright (c) 2020. All rights <a href="http://www.bootstrapmb.com" title="">reserved</a>.</div>
                    <div class="footer-nav">
                        <ul class="clearfix">
                            <li><a href="#">Privacy Policy</a></li>
                            <li><a href="#">Sitemap</a></li>
                            <li><a href="#">Terms & Conditions</a></li>
                        </ul>
                    </div>
                </div>
                
            </div>
        </div>
        
    </footer>

</div>
<!--End pagewrapper-->

<script src="js/jquery.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.fancybox.js"></script>
<script src="js/owl.js"></script>
<script src="js/appear.js"></script>
<script src="js/wow.js"></script>
<script src="js/scrollbar.js"></script>
<script src="js/validate.js"></script>
<script src="js/paroller.js"></script>
<script src="js/element-in-view.js"></script><script src="js/custom-script.js"></script>
<script src="js/index.js"></script>
<script src="js/settlement.js"></script>
<script src="js/axios.js"></script>

<script>
    var vm = new Vue({
        el:'#app',
        data(){
            return {
            isActive: false,
            flag: false,
            sku: {name: "空调"},
            goodsList: [{}],
            cartresult: {}
            }
        },
        methods: {
            searchToggler: () => {
            vm.isActive = true;
            document.body.classList.add('search-visible');
            },
            sEnter: () => {
            vm.isActive = false;
            document.body.classList.remove('search-visible');
            },
            shutSearch: () => {
            vm.isActive = false;
            document.body.classList.remove('search-visible');
            },
            searchCart: () => {
                axios.get('http://localhost:9002/cart/list').then(res => {
                    vm.goodsList = res.data.data.orderItemList;
                    vm.cartresult = res.data.data;
                });
            },
            addCart: ()=>{
                axios.get(`http://localhost:9002/cart/add?skuId=${sku.skuId}&num=1`).then(res=>{
                    vm.goodsList = res.data.data.orderItemList;
                });
            }
        },
        mounted() {   
            if (document.body.clientWidth < 500) {
                console.log(document.body.clientWidth)
                this.flag = true;
            }
            window.onresize = () => {
                return (() =>{
                    if (document.body.clientWidth < 500) {
                    this.flag = true;
                } else {
                    this.flag = false;
                }
                })();
            };
        },
    });
</script>

</body>
</html>